<template>
  <el-popover placement="top" trigger="hover" width="350" :open-delay="300">
    <template #reference>
      <slot>触发部分</slot>
    </template>
    <ul class="ylt_msg">
      <li v-for="(item, index) in textDesc" :key="index">
        {{ item.Title }}：<span class="cus_all">{{ item.Desc }}</span>
        <i
          class="el-icon-document-copy"
          v-copy="item.Title + '：' + item.Desc"
        ></i>
      </li>
    </ul>
  </el-popover>
</template>

<script>
export default {
  data() {
    return {
      textDesc: [
        {
          Title: "公司名称",
          Desc: "杭州易联通讯科技有限公司"
        },
        {
          Title: "纳税人识别号",
          Desc: "91330100MA2J12NA7A"
        },
        {
          Title: "电话",
          Desc: "18100184644"
        },
        {
          Title: "开户行",
          Desc: "杭州银行科技支行"
        },
        {
          Title: "账号",
          Desc: "3301040160016514849"
        },
        {
          Title: "地址",
          Desc: "浙江省杭州市钱塘新区白杨街道2号大街515号2幢1918室"
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.ylt_msg {
  // font-size: 18px !important;
  margin: 0 !important;
  // padding: 10px !important;

  li {
    list-style: none;
    line-height: 1.5;

    & > span {
      color: teal;
    }

    & > i {
      margin-left: 5px;
      position: relative;
      // top: 3px;
      cursor: pointer;
      transition: all 0.2s linear;

      &:hover {
        opacity: 0.7;
        color: #999;
      }
    }
  }
}
.cus_all {
  user-select: all;
}
</style>
